{{extend './_member_layout.html'}}

{{block 'title'}}{{ title }}{{/block}}

{{block 'head'}}
<!-- Bootstrap core CSS -->
<link href="/public/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/public/css/dashboard.css" rel="stylesheet">

<!-- 图片预览 -->
<script src="/public/js/jquery-1.8.3.min.js"></script>
<link href="/public/css/viewer.css" rel="stylesheet">
<script src="/public/js/viewer.js"></script>
<style>
  .table>tbody>tr>td {
    vertical-align: middle;
    line-height: 60px;
  }
</style>
{{/block}}

{{block 'content'}}
<div class="container-fluid">
  {{include './_member_left.html'}}
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <ul class="nav nav-pills">
      <li role="presentation" class="active"><a href="/admin/banners/add">增加</a></li>
      <li role="presentation" class="active"><a href="javascript:SelectAll()">全选</a></li>
      <li role="presentation" class="active"><a href="javascript:DeleteBanner()">删除</a></li>
    </ul>
    <div class="table-responsive">
      <table class="table table-striped table-condensed">
        <thead>
          <tr>
            <th>选择</th>
            <th>标题</th>
            <th>链接地址</th>
            <th>状态</th>
            <th>预览</th>
          </tr>
        </thead>
        <tbody>
          {{each banners}}
          <tr>
            <td><input type="checkbox" value="{{$value.id}}" class="check-box"></td>
            <td><a href="/admin/banners/edit?id={{$value.id}}">{{$value.title}}</a></td>
            <td>{{$value.linkurl}}</td>
            <td>{{$value.state?'正常':'禁用'}}</td>
            <td>
              <a onclick="ViewPicture(this)">
                <img style="width:50px;height: 50px;" src="{{$value.filepath}}" class="viewer-img" alt="">
              </a>
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
  function ViewPicture (obj) {
    var $image = $(obj).find('img.viewer-img');

    $image.viewer({
      toolbar: false,title:false, navbar: false,
      viewed: function() {
        $image.viewer('zoomTo', 1);
      }
    });
  }

  function SelectAll() {
    if($('.check-box').prop('checked')) {
      $('.check-box').prop('checked','')
    } else {
      $('.check-box').prop('checked','checked')
    }
    return false
  }

  function DeleteBanner() {
    var ids = []
    $('.check-box:checked').each(function (index, item) {
      ids.push($(item).val())
    })
    $.ajax({
        url: '/admin/banners/delete',
        data: { ids: ids },
        type: 'post',
        success: function (data) {
          var jsondata = data
          if(jsondata.code == 1) {
            window.location.href = jsondata.url
          } else {
            console.error(data.msg)
          }
        },
        error: function (error) {
          console.error(error)
        }
      })
      return false
    alert('请选择要删除的项！')
  }
</script>
{{/block}}